<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{
  amount: number;
  type?: 'rental' | 'deposit' | 'service' | 'total';
  showSymbol?: boolean;
  size?: 'small' | 'medium' | 'large';
}>();

const sizeClass = computed(() => {
  const sizes = {
    small: 'text-sm',
    medium: 'text-base',
    large: 'text-2xl',
  };
  return sizes[props.size || 'medium'];
});

const colorClass = computed(() => {
  const colors = {
    rental: 'text-blue-600',
    deposit: 'text-orange-600',
    service: 'text-green-600',
    total: 'text-red-600',
  };
  return colors[props.type || 'total'];
});

const typeLabel = computed(() => {
  const labels = {
    rental: '租金',
    deposit: '押金',
    service: '服务费',
    total: '总计',
  };
  return labels[props.type || 'total'];
});
</script>

<template>
  <div class="price-display">
    <span v-if="type" class="text-gray-600 text-xs mr-1">{{ typeLabel }}:</span>
    <span :class="[sizeClass, colorClass, 'font-bold']">
      <span v-if="showSymbol !== false">¥</span>
      {{ amount.toFixed(2) }}
    </span>
  </div>
</template>

